<template>
  <div class="wrapper">
    <Affix :offset-top="100">
      <Card class="card fixed-bottom">
        <affixTime :closeShop="true" @selected="clickBreadcrumb" />

      </Card>
    </Affix>
    <Card class="card">
      <div>
        <h4>总额概览</h4>

      </div>
      <div class="box">
        <div class="box-item" v-for="(item, index) of baseArr" :key="index">
          <div>
            {{item.contTitle}}
          </div>
          <div>
            {{totalObj[item.key]||0}}
          </div>
        </div>

      </div>

    </Card>

    <Card class="card">
      <div>
        <h4>趋势</h4>
        <div id="orderChart"></div>
      </div>
    </Card>

    <Card class="card">
      <div>
        <h4>运营报表</h4>
        <Table class="table" stripe :columns="columns" :data="data">
          <template #action="{ row, index }">
              <Button type="primary" size="small" style="margin-right: 5px" @click="showDetail(row)">详情</Button>
          </template>
        </Table>

      </div>
    </Card>

  </div>
</template>
<script>
import affixTime from "@/components/affix-time";
import * as API_Member from "@/api/billStatic";
import NP from 'number-precision'
import { Chart } from "@antv/g2";
const baseArr = [
        {
          key: "goodsPrice",
          title: "订单销售价格",
          contTitle: "订单销售总额",
        },
        {
          key: "costPrice",
          title: "订单成本价",
          contTitle: "订单总成本额",
        },
        {
          key: "freightPrice",
          title: "运费",
          contTitle: "总运费",
        },
        {
          key: "discountPrice",
          title: "优惠价",
          contTitle: "总优惠额",
        },
        {
          key: "afterSalePrice",
          title: "实际退款价",
          contTitle: "实际退款总额",
        },
        {
          key: "rewardMoney",
          title: "平台奖励",
          contTitle: "平台奖励总额",
        },
        {
          key: "transferFreeMoney",
          title: "转赠手续费",
          contTitle: "转赠手续费总额",
        },
        {
          key: "money",
          title: "当日盈亏金额",
          contTitle: "当日盈亏总额",
        },
      ]

export default {
  components: { affixTime },

  data() {
    return {
      baseArr,
      uvs: 0, // 访客数
      pvs: 0, // 浏览量
      dateList: [
        // 选择项
        {
          title: "今天",
          selected: false,
          value: "TODAY",
        },
        {
          title: "昨天",
          selected: false,
          value: "YESTERDAY",
        },
        {
          title: "过去7天",
          selected: true,
          value: "LAST_SEVEN",
        },
        {
          title: "过去30天",
          selected: false,
          value: "LAST_THIRTY",
        },
      ],
      orderChart: "", // 初始化图表
      params: {
        // 请求参数
        searchType: "LAST_SEVEN",
        year: "",
        month: "",
      },
      columns: [
        {
          key: "createDate",
          title: "日期",
        },
        ...JSON.parse(JSON.stringify(baseArr)),
        {
          key: "action",
          title: "详情",
          slot: 'action',
        },
      ],
      totalObj: {},
      data: [], // 图表数据
    };
  },
  watch: {
    params: {
      handler(val) {
        this.uvs = 0;
        this.pvs = 0;
        this.init();
      },
      deep: true,
    },
  },
  methods: {
    showDetail(record) {
      this.$router.push({
        path: '/bill-static-detail',
        query: {
          date: record.createDate
        }
      })
    },
    // 订单图
    initChart() {
      const baseData = JSON.parse(JSON.stringify(baseArr))
      let data = []
      this.data.forEach((item) => {
        baseData.forEach(tempItem=>{
          let curObj = {
            date: item.createDate,
            title: tempItem.title,
            value: Number(item[tempItem.key])
          }
          data.push(curObj)
        })
      });
      this.orderChart.data(data);
      this.orderChart.scale({
        activeQuantity: {
          range: [0, 1],
          nice: true,
        },
      });
      this.orderChart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      this.orderChart
        .line()
        .position("date*value")
        .color("title")
        .label("value")
        .shape("smooth");

      this.orderChart
        .point()
        .position("date*value")
        .color("title")
        .label("value")
        .shape("circle")
        .style({
          stroke: "#fff",
          lineWidth: 1,
        });
       this.orderChart.area().position("date*value").color("title").shape("smooth");
      this.orderChart.render();
    },
    // 通过时间来筛选
    clickBreadcrumb(item, index) {
      let callback = JSON.parse(JSON.stringify(item));
      this.params = callback;
    },
    // 初始化数据
    init() {
      this.orderChart ? this.orderChart.clear() : ''
      let totalObj = {
        goodsPrice: 0,
        costPrice: 0,
        freightPrice: 0,
        discountPrice: 0,
        afterSalePrice: 0,
        rewardMoney: 0,
        transferFreeMoney: 0,
        money: 0,

      }
      API_Member.getBillStatisticsList(this.params).then((res) => {
        if (res.result) {
          this.data = res.result;
          res.result.forEach((item) => {
            for(let key in totalObj) {
              totalObj[key] = NP.plus(totalObj[key], item[key])
            }
          });

          if (!this.orderChart) {
            this.orderChart = new Chart({
              container: "orderChart",
              autoFit: true,
              height: 500,
              padding: [70, 70, 70, 70],
            });
          }
          this.initChart();
        }
      }).finally(()=>{
        this.totalObj = totalObj
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped lang="scss">
.table {
  margin-top: 10px;
}
.box-item {
  display: flex;
  flex-direction: column;
  width: 25%;
  font-weight: bold;
  justify-content: center;
  > div {
    margin: 4px;
  }
}
.box {
  background: rgb(250, 250, 250);
  padding: 10px;
  margin-top: 10px;
  display: flex;
}
.card {
  margin-bottom: 10px;
}
</style>
